<template>
<div class="address-box">
    <nav-bar class="nav-bar">
        <template v-slot:default>
            模擬支付
        </template>
    </nav-bar>

<div class="card">
    <van-image
        style="text-align: center" width="64px" lazy-load :src="type == 'wechat' ? wxicon : zfbicon"
    />
    <div style="text-align: center; padding: 30px; line-height: 40px;">
        <p style="font-size: 20px;">支付金額</p>
        <p style="font-size: 20px; color: red;" >
            <small>￥</small>{{ info.amount }}.<small>00</small>
        </p>
    </div>
    <van-cell style="text-align: left;" title="訂單NO." :value="info.order_no"/>
    <van-cell style="text-align: left;" title="收款方" value="圖書商店" label="模擬支付，改變支付狀態，完成購物流程，請放心付款"/>
</div>
<div style="margin: 16px;">
    <van-button @click="toPay()" round block type="primary" native-type="sumbit">立即支付</van-button>
</div>
</div>
</template>
<style>
.card{
    margin-top:100px;
}
</style>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { reactive,toRefs,onMounted } from 'vue';
import { getOrderDetail,paytest } from '@/network/order';
import { useRouter,useRoute } from 'vue-router';
import { Dialog } from 'vant';
export default({
    components:{
        NavBar
    },
    setup(){
        const router = useRouter()
        const route = useRoute()
        let type=route.query['type']
        let orderId = route.query['orderid']
        console.log(orderId);
        const state = reactive({
            info:{},
            wxicon:require('@/assets/images/wx.jpg'),
            zfbicon:require('@/assets/images/zfb.jpg')
        })
        console.log(type,orderId);
        onMounted(()=>{
            getOrderDetail(orderId).then(res=>{
                console.log(res);
                state.info =res
            })
        })
        const toPay =() =>{
            console.log(type,"##");
            paytest(orderId, {type:type}).then(res=>{
                console.log(res);
                let option = {};
                if(type == "aliyun"){
                    option={
                        title:'支付成功'+res.out_trade_no,
                        message:'已支付'+(res.total_amount/100)+'.00, 购买了'+res.subject,
                    }
                }else{
                    option={
                        title:'支付成功'+res.out_trade_no,
                        message:'已支付'+(res.total_fee/100)+'.00, 购买了'+res.body,
                    }
                }
                Dialog.alert(option).then(()=>{
                    router.push({path:'/orderdetail',query:{id:orderId}})
                });
            })
        }
        return {
            ...toRefs(state),
            type,
            toPay
        }
    }
})
</script>
<!-- amount:數量  label:標簽 primary:首先的 Dialog:對話 option:選項 trade:傳統-->    